<template>
<div id="user-psw">
    <Input :type="psw" :placeholder="myplaceholder" class="psw" v-model.lazy.trim="password"></Input>
    <div class="user-eye" @click.stop="changeeyes">
      <img src="~assets/images/浏览@1x.png" alt="">
      <div class="user-line" v-show="close"></div>
    </div>
</div>
</template>
<script>
    export default {
      name:'UserPassword',
        data () {
            return {
                psw:'password',//默认数字加密
                close:true,//默认显示不显示的照片
                myplaceholder:'请输入密码（6-10位）',
                password:''
            }
        },
        methods:{
          //切换图片显示数字
          changeeyes(){
            this.psw = this.psw == 'password' ? 'text' : 'password';
            this.close = !this.close;
          }
        }
    }
</script>
<style>
#user-psw{
  position: relative;
  top: 0;
  left: 0;
}
#user-psw .psw{
  width: 100%;
}
.user-eye{
  position: absolute;
  top: 12px;
  right: 8px;
  width: 24px;
  height: 18px;
}
.user-line{
  position: absolute;
  top: 6px;
  right: 0;
  height:0px;
  border: 1px solid #ccc;
  width: 23px;
  background-color: #ccc;
  transform:rotate(-125deg);
  -o-transform:rotate(-125deg);
  -moz-transform:rotate(-125deg);
  -webkit-transform:rotate(-125deg);
}
</style>
